<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>个人中心</span>
    </div>
    <form class="form-horizontal">
      <p class="add-btn">
        <a href="#/personalCenter/changeInfo" class="btn btn-default">修改个人资料</a>
        <a href="#/personalCenter/changePwd" class="btn btn-default add-ad">修改密码</a>
        <button type="button" @click="Nav.methods.logout()" class="btn btn-default add-ad">注销</button>
      </p>
      <div class="form-group">
          <p class="col-sm-4 col-sm-offset-5">用户ID：<span>{{user.userid}}</span></p>
          <p class="col-sm-4 col-sm-offset-5">用户名称：<span>{{user.username}}</span></p>
          <p class="col-sm-4 col-sm-offset-5">固定电话：<span>{{user.mobile}}</span></p>
          <p class="col-sm-4 col-sm-offset-5">手机：<span>{{user.telephone}}</span></p>
          <p class="col-sm-4 col-sm-offset-5">电子邮箱：<span>{{user.email}}</span></p>
          <div class="col-sm-4 col-sm-offset-5">
            <span class="juese">角色：</span>
            <ul class="juese-ul">
              <li v-for="item in user.roleList">{{item.rolename}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.roleid}}</li>
            </ul>
          </div>
      </div>
    </form>
  </div>
</template>

<script>
  import base from '@/service/Base.vue'
  import Nav from '@/components/Nav.vue'

  export default {
    name: 'PersonalCenter',
    data: function () {
      return {
        user: base.user,
        Nav: Nav
      }
    }
  }
</script>
